<script setup>
	import {inject, ref, shallowRef} from "vue";
	import trainPassListData from '@/dicts/ability/trainPassList.json'
	import {getTrainPassDetail} from "@/api/trainPass.js";
	const getAssetsFile = inject("getAssetsFile")
	
	const trainPassForm = shallowRef(null)
	const trainPassFormRules = {
		name: {
			required: true,
			trigger: ['input', 'blur'],
			message: '请输入完整姓名'
		},
		identityCard: {
			required: true,
			trigger: ['input', 'blur'],
			message: '请输入完整身份证号码'
		},
	}
	const trainPassFormData = ref({
		name: '',
		identityCard: '',
	})
	
	const loading = ref(false)
	const searchTrainPass = (e) => {
		e.preventDefault()
		trainPassForm.value.validate((errors) => {
			if (!errors) getTrainPassFormData()
			else {
				console.log(errors)
			}
		})
	}
	
	const resetData = ref({
		name: null,
		identityCard: null,
		certificateName: null,
		certificateCode: null,
		files: null,
	})
	const trainPassData = ref([])
	const count = ref(0)
	const getTrainPassFormData = async () => {
		loading.value = true
		// trainPassFormData.value = resetData.value
		const params = {
			name: trainPassFormData.value.name,
			identityCard: trainPassFormData.value.identityCard
		}
		const res = await getTrainPassDetail(params)
		if (res.data.code === 200 && Array.isArray(res.data.data) && res.data.data.length > 0) {
			trainPassData.value = res.data.data
		}
		loading.value = false
	}
</script>

<template>
	<div class="pageContent">
		<n-space
			align="center"
			justify="space-between"
			style="margin-bottom: 10px"
		>
			<n-h6 class="pageTitle" prefix="bar">
				<div>
					培训合格证查询
				</div>
			</n-h6>
		</n-space>
		<n-divider class="pageDivider"></n-divider>
		<n-form
			ref="trainPassForm"
			:model="trainPassFormData"
			:rules="trainPassFormRules"
			label-placement="left"
			require-mark-placement="left"
		>
			<n-space>
				<n-form-item label="姓名" path="name">
					<n-input v-model:value="trainPassFormData.name" placeholder="请输入姓名"/>
				</n-form-item>
				<n-form-item label="身份证号码" path="identityCard">
					<n-input v-model:value="trainPassFormData.identityCard" placeholder="请输入身份证号码"/>
				</n-form-item>
				<n-form-item>
					<n-button
						type="primary"
						:disabled="loading"
						:loading="loading"
						@click="searchTrainPass"
					>
						查询{{ loading ? '中' : '' }}
					</n-button>
				</n-form-item>
			</n-space>
		</n-form>
		<n-divider class="trainPassDividerMid"></n-divider>
		<div v-if="!trainPassData.length">
			<span style="font-weight: bold; padding: 8px; margin-right: 8px">搜索结果</span>暂无数据
		</div>
		<div v-else >
			<n-list bordered v-for="item in trainPassData" style="margin-bottom: 10px">
				<n-list-item>
					<n-grid :cols="2" :x-gap="10" :y-gap="10">
						<n-gi :span="1">
							<n-thing style="font-weight: bold">
								姓名: <span style="font-weight: normal">{{ item.name }}</span>
							</n-thing>
						</n-gi>
						<n-gi :span="1">
							<n-thing style="font-weight: bold">
								身份证号码: <span style="font-weight: normal">{{ item.identityCard }}</span>
							</n-thing>
						</n-gi>
					</n-grid>
				</n-list-item>
				<n-list-item>
					<n-grid :cols="2" :x-gap="10" :y-gap="10">
						<n-gi :span="1">
							<n-thing style="font-weight: bold">
								证书名称: <span style="font-weight: normal">{{ item.certificateName }}</span>
							</n-thing>
						</n-gi>
						<n-gi :span="1">
							<n-thing style="font-weight: bold">
								证书编号: <span style="font-weight: normal">{{ item.certificateCode }}</span>
							</n-thing>
						</n-gi>
					</n-grid>
				</n-list-item>
				<n-list-item>
					<n-grid :cols="2" :x-gap="10" :y-gap="10">
						<n-gi :span="2">
							<n-thing style="font-weight: bold">
								证书图片: <img :src="Array.isArray(item.files) && item.files.length > 0 ? item.files[0].accessUrl : '' " alt="" style="width: 100%">
							</n-thing>
						</n-gi>
					</n-grid>
				</n-list-item>
			</n-list>
		</div>
	</div>
</template>

<style scoped>
	.trainPassDividerMid {
		margin: 10px 0;
		padding: 0;
	}
</style>
